<template>
    <div class="student-list ">
        <el-form :inline="true" :model="form" class="t-form gray t-class-list">
                <el-form-item label="">
                    <el-select v-model="form.baseSectionId" placeholder="年级">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="item in condition.gradeObj.list" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            <el-form-item>
                <el-select v-model="form.type" placeholder="学生状态">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="正式" :value="1"></el-option>
                    <el-option label="试听" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input class="s-keyword" v-model="form.nameOrNo" placeholder="学生姓名/学生编号，手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" class="search-btn">查询</el-button>
            </el-form-item>
            <el-form-item class="new-item">
                <el-button v-if="config.student_add" type="primary" class="new-btn" @click="$router.push('/main/system/student/add')">新增学生</el-button>
            </el-form-item>
        </el-form>
        <el-table class="line-table" :data="studentObj.list" style="width: 100%" header-align="center" empty-text="暂无学生，请先添加学生">
            <el-table-column prop="studentNo" label="学生编号" align="center"  fixed></el-table-column>
            <el-table-column prop="name" label="学生姓名" align="center" fixed></el-table-column>
            <el-table-column prop="phoneNo" label="手机号码" align="center" width="120"></el-table-column>
            <el-table-column prop="slavePhoneNo" label="备用手机号码" align="center" width="120"></el-table-column>
            <el-table-column label="性别" align="center">
                <template scope="scope">
                    {{scope.row.sex===1?'男':scope.row.sex===2?'女':'--'}}
                </template>
            </el-table-column>
            <el-table-column prop="baseSectionName" label="年级" align="center"> </el-table-column>
            <el-table-column label="学生状态" align="center">
                <template scope="scope">
                    {{scope.row.type===1?'正式':scope.row.type===2?'试听':'未知'}}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" width="160"> 
                <template scope="scope">
                    {{scope.row.createTime | formatDate('YYYY-MM-DD H:mm:ss')}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                        <router-link v-if="scope.row.type===2&&config.student_update" :to="'/main/system/student/'+scope.row.id">
                            <span class="btn-edit">编辑</span>
                        </router-link>
                </template>
            </el-table-column>
        </el-table>
        <v-pagination ref="pagin" class="pag" :total="studentObj.total|toNumber" @getListResult="getStudent" :currentPage="form.pageIndex"></v-pagination>
    </div>
</template>
<script>
import VPagination from "../../common/Pagination"
import { mapState, mapActions, mapGetters } from 'vuex'
import io from 'lib/io'
export default {
    name: 'student-list',
    components: {
        VPagination,
    },
    data() {
        return {
            form: {
                baseSectionId:  null,
                type:  null,
                nameOrNo: '',
                pageIndex: 1,
                pageSize: 10
            },
            studentObj:{}
        }
    },
    computed: {
        ...mapState(['condition',]),
        ...mapGetters(['config'])
    },
    created() {
        this.findBaseSectionPage({ pageIndex: 1, pageSize: 10000000 })
        let cond = sessionStorage.getItem('studentCond')
        if (cond) {
            this.form = JSON.parse(cond)
        }
        this.getStudent()
    },
    mounted() {
        this.$refs.pagin.changePage(this.form.pageIndex)
    },
    methods: {
        ...mapActions(['findClassPage', 'findBaseSectionPage']),
        async getStudent(opt) {
            let {data}=await io.post6(io.findStudentList,{ ...this.form, ...opt })
            if(data.success){
                this.studentObj=data.data
            }
        },
        search() {
            this.$refs.pagin.changePage(1)
            this.form.pageIndex=1
            this.getStudent()
        }
    },
    beforeDestroy() {
        sessionStorage.setItem('studentCond', JSON.stringify(this.form))
    }

}
</script>
<style lang="stylus" scoped>
@import '~assets/stylus/mixin.styl'
.student-list
    padding-bottom 50px
.t-form
    table-form()
    margin-top 20px
    margin-bottom 30px
    .el-form-item
        margin-bottom 10px
.line-table
    .btn-edit{
        cursor: pointer;
        color: #0084bb;
        padding: 0 5px;
        display: inline-block;
    }
.set-score
    cursor pointer
    &:hover
        color #0084bb
.t-class-list
    padding-bottom 10px
    .el-form-item.new-item
         bottom 18px
         margin-right 10px
.opt-div
    display inline-block
.s-keyword
    width 250px
</style>


